<template>
	<view class="content">
		<!-- 项目分类选择 -->
		<view class="project-selector">
			<view class="selector-header">
				<text class="selector-title">选择项目分类</text>
				<text class="selector-tip">请先选择项目分类，然后点击下方菜单</text>
			</view>
			<picker 
				@change="handleProjectChange" 
				:range="projectOptions" 
				:range-key="'classificationName'"
				class="project-picker"
			>
				<view class="picker-content">
					<text class="picker-text">{{currentProject.classificationName || '请选择项目'}}</text>
					<text class="picker-arrow">▼</text>
				</view>
			</picker>
		</view>

	

		<view class="menu-container">
			
			<view class="menu-grid">
				<view class="menu-item" @click="goToDatabase" :class="{ 'disabled': !currentProject.id || currentProject.id === ''  }">
					<image class="menu-icon" src="/static/images/shujuk.png"></image>
					<view class="menu-title">数据库</view>
					<view class="menu-count" v-if="counts.database > 0">{{counts.database}}</view>
				</view>
				
				<view class="menu-item" @click="goToWebsite" :class="{ 'disabled': !currentProject.id || currentProject.id === ''  }">
					<image class="menu-icon" src="/static/images/wangzhi.png"></image>
					<view class="menu-title">网址</view>
					<view class="menu-count" v-if="counts.password > 0">{{counts.password}}</view>
				</view>
				
				<view class="menu-item" @click="goToServer" :class="{ 'disabled': !currentProject.id || currentProject.id === ''  }">
					<image class="menu-icon" src="/static/images/fuwuqi.png"></image>
					<view class="menu-title">服务器</view>
					<view class="menu-count" v-if="counts.server > 0">{{counts.server}}</view>
				</view>
				
				<!-- 预留位置，方便以后添加更多菜单 -->
				<view class="menu-item placeholder" v-if="false">
					<view class="menu-icon">➕</view>
					<view class="menu-title">新功能</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { listClassification } from '../api/project/classification';
	import { listDatabase } from '../api/database';
	import { listPassword } from '../api/password';
	import { listServer } from '../api/server';
	
	export default {
		data() {
			return {
				projectOptions: [],
				currentProject: {},
				counts: {
					database: 0,
					password: 0,
					server: 0
				}
			}
		},
		onLoad() {
			this.getProjectOptions();
		},
		// 下拉刷新处理
		onPullDownRefresh() {
			this.handlePullDownRefresh();
		},
		methods: {
			// 处理下拉刷新
			handlePullDownRefresh() {
				console.log('开始下拉刷新');
				// 重新获取项目分类选项
				this.getProjectOptions().then(() => {
					// 刷新完成后停止下拉刷新动画
					uni.stopPullDownRefresh();
				
				}).catch(() => {
					// 即使出错也要停止下拉刷新动画
					uni.stopPullDownRefresh();
					uni.showToast({
						title: '刷新失败',
						icon: 'none',
						duration: 1500
					});
				});
			},
						// 获取项目分类选项
			getProjectOptions() {
				console.log('开始获取项目分类选项');
				return new Promise((resolve, reject) => {
					listClassification({pageSize:10000,pageNum:1}).then(response => {
						console.log('项目分类响应:', response);
						if (response.code === 200) {
							this.projectOptions = response.rows || [];
							console.log('项目选项:', this.projectOptions);
							
							// 获取已选择的项目
							this.getGlobalProject();
							
							// 如果没有已选择的项目，默认选择第一个项目
							if (!this.currentProject.id && this.projectOptions.length > 0) {
								this.currentProject = this.projectOptions[0];
								this.setGlobalProject();
							}
							
							// 获取各模块数量
							this.getModuleCounts();
							resolve();
						} else {
							reject(new Error('获取项目分类失败'));
						}
					}).catch(error => {
						console.error('获取项目分类失败:', error);
						this.projectOptions = [];
						reject(error);
					});
				});
			},
			
			// 处理项目选择
			handleProjectChange(e) {
				console.log('项目选择变更:', e.detail);
				const index = e.detail.value;
				this.currentProject = this.projectOptions[index] || {};
				console.log('选择的项目:', this.currentProject);
				
				// 存储到全局状态
				this.setGlobalProject();
				
				// 项目变更后，重新获取各模块数量
				this.getModuleCounts();
			},
			
			// 设置全局项目
			setGlobalProject() {
				// 存储到本地存储
				uni.setStorageSync('currentProject', this.currentProject);
				
				// 存储到全局数据
				getApp().globalData = getApp().globalData || {};
				getApp().globalData.currentProject = this.currentProject;
			},
			
			// 获取全局项目
			getGlobalProject() {
				// 从本地存储获取
				const storedProject = uni.getStorageSync('currentProject');
				if (storedProject && storedProject.id) {
					this.currentProject = storedProject;
				}
				
				// 从全局数据获取
				if (getApp().globalData && getApp().globalData.currentProject) {
					this.currentProject = getApp().globalData.currentProject;
				}
			},
			
			// 获取各模块数量
			getModuleCounts() {
				if (this.currentProject.id) {
					this.getDatabaseCount();
					this.getPasswordCount();
					this.getServerCount();
				}
			},
			
			// 获取数据库数量
			getDatabaseCount() {
				const params = {
					pageNum: 1,
					pageSize: 1,
					classificationId: this.currentProject.id
				};
				
				listDatabase(params).then(res => {
					if (res.code === 200) {
						this.counts.database = res.total || 0;
					}
				}).catch(() => {
					this.counts.database = 0;
				});
			},
			
			// 获取密码数量
			getPasswordCount() {
				const params = {
					pageNum: 1,
					pageSize: 1,
					classificationId: this.currentProject.id
				};
				
				listPassword(params).then(res => {
					if (res.code === 200) {
						this.counts.password = res.total || 0;
					}
				}).catch(() => {
					this.counts.password = 0;
				});
			},
			
			// 获取服务器数量
			getServerCount() {
				const params = {
					pageNum: 1,
					pageSize: 1,
					classificationId: this.currentProject.id
				};
				
				listServer(params).then(res => {
					if (res.code === 200) {
						this.counts.server = res.total || 0;
					}
				}).catch(() => {
					this.counts.server = 0;
				});
			},
			
			goToDatabase() {
				// 检查是否已选择项目，且不能是"全部项目"
				if (!this.currentProject.id || this.currentProject.id === '' || this.currentProject.id === 'all') {
					uni.showModal({
						title: '提示',
						content: '请先选择一个具体的项目分类',
						showCancel: false
					});
					return;
				}
				
				uni.navigateTo({
					url: '/pages/database/index'
				});
			},
			
			goToWebsite() {
				// 检查是否已选择项目，且不能是"全部项目"
				if (!this.currentProject.id || this.currentProject.id === '' || this.currentProject.id === 'all') {
					uni.showModal({
						title: '提示',
						content: '请先选择一个具体的项目分类',
						showCancel: false
					});
					return;
				}
				
				uni.navigateTo({
					url: '/pages/password/index'
				});
			},
			
			goToServer() {
				// 检查是否已选择项目，且不能是"全部项目"
				if (!this.currentProject.id || this.currentProject.id === '' || this.currentProject.id === 'all') {
					uni.showModal({
						title: '提示',
						content: '请先选择一个具体的项目分类',
						showCancel: false
					});
					return;
				}
				
				uni.navigateTo({
					url: '/pages/server/index'
				});
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 40rpx;
		background-color: #f5f7fa;
		min-height: 100vh;
	}
	
	/* 项目选择器样式 */
	.project-selector {
		background: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 30rpx 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
	
	.selector-header {
		margin-bottom: 25rpx;
		text-align: center;
	}
	
	.selector-title {
		display: block;
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
		margin-bottom: 10rpx;
	}
	
	.selector-tip {
		display: block;
		font-size: 26rpx;
		color: #666;
		line-height: 1.4;
	}

	/* 当前项目详情样式 */
	.current-project {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 30rpx;
		margin: 0 20rpx 30rpx 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.project-label {
		font-size: 28rpx;
		color: #666;
		margin-right: 15rpx;
	}

	.project-name {
		font-size: 32rpx;
		color: #007aff;
		font-weight: 600;
	}
	
	.project-picker {
		width: 100%;
	}
	
	.picker-content {
		background: #f8f9fa;
		border: 2rpx solid #e9ecef;
		border-radius: 12rpx;
		padding: 25rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all 0.3s ease;
	}
	
	.picker-content:active {
		background: #e9ecef;
		border-color: #007aff;
	}
	
	.picker-text {
		font-size: 30rpx;
		color: #333;
		font-weight: 500;
		flex: 1;
	}
	
	.picker-arrow {
		color: #666;
		font-size: 24rpx;
		margin-left: 20rpx;
	}
	
	.debug-info {
		margin-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
	}
	
	.menu-container {
		width: 100%;
		max-width: 1200rpx;
		margin: 0 auto;
		padding-top: 60rpx;
	}
	
	.project-tip {
		background: #fff3cd;
		border: 1rpx solid #ffeaa7;
		border-radius: 12rpx;
		padding: 25rpx 30rpx;
		margin: 0 20rpx 30rpx 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
	}
	
	.tip-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}
	
	.tip-text {
		font-size: 28rpx;
		color: #856404;
		text-align: center;
	}
	
	.menu-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
		gap: 30rpx;
		justify-items: center;
	}
	
	.menu-item {
		width: 100%;
		max-width: 350rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 50rpx 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		cursor: pointer;
		position: relative;
		
		&:active {
			transform: translateY(4rpx);
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
		}
		
		&:hover {
			transform: translateY(-2rpx);
			box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
		}
		
		&.disabled {
			opacity: 0.6;
			cursor: not-allowed;
			
			&:active {
				transform: none;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			}
			
			&:hover {
				transform: none;
				box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.1);
			}
		}
		
		&.placeholder {
			opacity: 0.5;
			border: 2rpx dashed #ddd;
			background: #fafafa;
		}
	}
	
	.menu-icon {
		width: 120rpx;
		height: 120rpx;
		margin-bottom: 20rpx;
		object-fit: contain;
	}
	
	.menu-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.menu-count {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: #ff3b30;
		color: #fff;
		font-size: 24rpx;
		font-weight: bold;
		min-width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		border-radius: 20rpx;
		padding: 0 8rpx;
		box-sizing: border-box;
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.menu-grid {
			grid-template-columns: 1fr;
			gap: 20rpx;
		}
		
		.menu-item {
			max-width: 100%;
			padding: 40rpx 20rpx;
		}
	}
</style>
